<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
	<meta  charset="utf-8"/>
	<title>活动</title>

	<link rel="stylesheet" type="text/css" href="../../../admin/site/common/css/global.css" />
	<script type="text/javascript" src="../../../admin/site/common/js/jquery-1.11.1.min.js"></script>
	
</head>
<body>
	<input type="hidden" id="sess_in" th:value="${session!=null &amp;&amp; session.user!=null ? '1':'0'}" />
	<div class="page">
		<div class="toper">
		</div><!--顶部广告banner-->
		<div class="header" id="header">
			<input id="sessionWeixin" type="hidden" th:value="${session.indexWeixin}"/>
			<input id="sessionFans" type="hidden" th:value="${session.indexFans}"/>
			<input id="sessionUser" type="hidden" th:value="${session.user==null?'1':'2'}"/>
			<input id="sessionUserName" type="hidden" th:if="${session.user!=null &amp;&amp; session.user.userName != null}" th:value="${session.user.userName}"/>
		</div><!--复合导航栏-->
		
		
		<div class="bodymain activitymain">
			<div class="bdsharebuttonbox quicklink" id="fenxiang"></div>
			<div class="alltitle atlight">
				<div class="atlabel">活动专区
				</div>
				<div class="atblank">
				</div>
			</div>
			<div class="activityslide" th:if="${status == '1'}">
				<div class="activityimgunslide">
					<img th:src="${activity.imgPath}" />
<!-- 					<img src="../../../admin/site/common/pic/act1.png" />
					<img src="../../../admin/site/common/pic/act1.png" />
					<img src="../../../admin/site/common/pic/act1.png" />
					<img src="../../../admin/site/common/pic/act1.png" />
					<img src="../../../admin/site/common/pic/act1.png" /> -->
				</div>
				<div class="slide-bottom">
					<ul>
						<!-- <li class="slidenow">1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li> -->
					</ul>
				</div>
				<div class="apopquestion" id="quesDiv" >
					<input type="hidden"  th:value="${activityQuestionList.size()}" id="quesTotal" />
					<form action="/activityFore/quesAnswer.yson" method="post" id="quesAnswer" onkeydown="javascript:if(event.keyCode==13)return false;">
					<div class="apopquin" th:style="${activityQuestion.id == null ? 'display: none;':'display: block;'}" id="quesShow1" >
						<input type="hidden"  th:value="${activityQuestion.num}" id="quesNum" name="questionOrder"/>
						<input type="hidden"  th:value="${activityQuestion.id}" id="quesId" name="questionId"/>
						<input type="hidden"  th:value="${activityQuestion.question}" id="quesQues" name="question"/>
						<input type="hidden"  th:value="${activity.id}" id="actyId" name="activityId"/>
						
						<!-- <div class="apopq" onclick="hideQues()" ></div> -->
						<div class="apoptext" th:text="${'Q'+activityQuestion.num+':'+activityQuestion.question}" id="quesName"></div>
						
						<div class="apopa" th:if="${activityQuestion.type == '0'}" id="quesOpt" >
							<span class="apop-0" th:each="activityOption,indexStat:${activityQuestion.activityOptionList}">
								<input type="radio" class="apop-0r" name="answer" th:value="${activityOption.name}"/>
								<span th:text="${activityOption.name}"></span>
							</span>
						</div>
						<div class="apopa" th:if="${activityQuestion.type == '1'}" id="quesOpt">
							<span class="apop-1">分数:</span><input type="text" name="answer"/>
						</div>
						<div class="apopa" th:if="${activityQuestion.type == '2'}" id="quesOpt">
							<span class="apop-1">答案:</span><input type="text" name="answer"/>
						</div>
						<div class="apopa" th:if="${activityQuestion.type == '3'}" id="quesOpt">
							<span class="apop-0"  th:each="activityOption,indexStat:${activityQuestion.activityOptionList}" th:value="${activityOption.name}">
								<input class="apop-0r" type="radio" name="answer" th:value="${activityOption.name}"/>
								<span th:text="${activityOption.name}"></span>
							</span>
						</div>
						<div class="apopa" th:if="${activityQuestion.type == '4'}" id="quesOpt">
							<span  class="apop-0" th:each="activityOption,indexStat:${activityQuestion.activityOptionList}" th:value="${activityOption.name}">
								<input class="apop-1r" type="checkbox" name="answer" th:value="${activityOption.name}"/>
								<span th:text="${activityOption.name}"></span>
							</span>
						</div>
						<div class="apopbtn" th:if="${activityQuestion.type != '0'}">
							<div th:class="${activityQuestion.num == 1 ?'apopbtnone lbtn':'apopbtnone lbtn btnon'}" id="lastbut"
								onclick="lastQues()"></div>
							<div th:class="${activityQuestion.num == activityQuestionList.size() ?'apopbtnone rbtn':'apopbtnone rbtn btnon'}"  id="nextbut"
								onclick="nextQues()"></div>
						</div>
						<div class="apopbtn-b" th:if="${activityQuestion.type == '0'}">
							<input class="apop-b" type="button" value="提交" onclick="subQues()"/>
						</div>
					</div>
					<div class="apopquin" th:style="${activityQuestion.id == null ? 'display: block;':'display: none;'}"  id="quesShow2">
						<span class="apopthank">您已经完成本次活动，感谢您的参与！</span>
					</div>
					</form>
				</div>
				<input type="hidden"  th:value="${activityQuestion.id}" th:id="${'quesDiv_'+activityQuestion.num}" th:each="activityQuestion,indexStat:${activityQuestionList}" />
			</div>
			<div class="activityno" th:if="${status == '2'}">暂无活动！</div>
			<div class="activitynews">
				<div class="apoptitle" th:text="${activity.name}"></div>
				<div class="apopd" th:text="${activity.mark}"></div>
			</div>
			<div class="activityleft" th:if="${type != '2'}">
				<div class="rbtop">
					<div class="rb-left"></div>
					<div class="rb-right">
						<div class="rbtitle">品牌活动专区</div>
					</div>
				</div>
				<div class="activity-brand">
					<a th:href="${'/activityFore/activityList.html?brandId='+activityBrand.id+'&amp;type=2'}" th:if="${10>=indexStat.count}" th:each="activityBrand,indexStat:${activityBrandList}" >
						<img class="act-brand" th:src="${activityBrand.logUrl}" th:if="${indexStat.odd}"/>
						<img class="act-brand odd" th:src="${activityBrand.logUrl}" th:if="${indexStat.even}"/>
					</a>
				</div>
			</div>
			<div class="activityright" th:if="${type != '2'}">
				<div class="rbtop">
					<div class="rb-left"></div>
					<div class="rb-right">
						<div class="rbtitle">热力活动推荐</div>
					</div>
				</div>
				<div class="activity-hot">
					<div class="ac-hottop"><span class="ac-hoticon"></span>奖品类活动，参加后可以获取实物奖品！</div>
					<div class="ac-hotarea">
						<a th:href="${advert.advertUrl}" th:each="advert,indexStat:${advertList1}" th:if="${4>=indexStat.count}">
							<img class="act-hot" th:src="${advert.advertImg}" th:if="${indexStat.odd}" />
							<img class="act-hot odd" th:src="${advert.advertImg}" th:if="${indexStat.even}" />
						</a>
					</div>
				</div>
				<div class="activity-hot">
					<div class="ac-hottop"><span class="ac-hoticon"></span>机遇类活动，参加后有机会活动门票，签名可以获取实物奖品</div>
					<div class="ac-hotarea">
						<a th:href="${advert.advertUrl}" th:each="advert,indexStat:${advertList2}" th:if="${4>=indexStat.count}">
							<img class="act-hot" th:src="${advert.advertImg}" th:if="${indexStat.odd}" />
							<img class="act-hot odd" th:src="${advert.advertImg}" th:if="${indexStat.even}" />
						</a>
					</div>
				</div>
			</div>
			<div class="activitybig" th:if="${type == '2'}">
				<div class="ac-bigtop">
					<img th:src="${activityBrand.logUrl}" />
					<div class="ac-bigshadow"></div>
					<div class="ac-bigtitle" th:text="${activityBrand.name + '品牌活动专区'}"></div>
				</div>
				<div class="ac-bigcontent">
					<a th:href="${'/activityFore/activityList.html?brandId='+acty.brandId+'&amp;activityId='+acty.id+'&amp;type=2'}" th:if="${4>=indexStat.count}" th:each="acty,indexStat:${activitylist}" >
						<img class="odd" th:src="${acty.imgPath}" th:if="${indexStat.odd}"/>
						<img  th:src="${acty.imgPath}" th:if="${indexStat.even}"/>
					</a>
				</div>
				<div class="mainbottomblank">
				</div>
			</div>
			<div class="mainbottomblank">
			</div>
		</div>
		<div class="footer" id="footer" th:utext="${session.indexFooter}">
		</div><!--页面底部-->
	</div>
</body>
	<script type="text/javascript" src="../../../admin/js/jquery.form.js" ></script>
	<script type="text/javascript" src="../../../admin/site/common/js/header.js"></script>
	<script type="text/javascript">
		$(function(){
			  $("#nav-activity").attr("class","nav-clickon");
		});
		
		function addCok(activityId,questionId,question,questionOrder,answer){
			document.cookie = addCookie("activityId_"+questionOrder,activityId,1800);
			document.cookie = addCookie("questionId_"+questionOrder,questionId,1800);
			document.cookie = addCookie("question_"+questionOrder,question,1800);
			document.cookie = addCookie("questionOrder_"+questionOrder,questionOrder,1800);
			document.cookie = addCookie("answer_"+questionOrder,answer,1800);
		}
		
		function getCok(num){
			var activityId = getCookie("activityId_"+num);
			var questionId = getCookie("questionId_"+num);
			var question = getCookie("question_"+num);
			var questionOrder = getCookie("questionOrder_"+num);
			var answer = getCookie("answer_"+num);
			if(questionId == null || questionId == ""){
				return true;
			}
			alert("activityId:"+activityId+";questionId:"+questionId+";question:"+question+";questionOrder:"+questionOrder+";answer:"+answer);
			return false;
		}
		
		//登录判断
		function isLogin(){
			var session = $("#sess_in").val();
			if(session == '1'){
				return true;
			} else if(session == '0'){
				var answers = document.getElementsByName("answer");
				var answer = "";
				if(answers.length>1){
					for(var i=0;answers.length>i;i++){
						if(answers[i].checked){
							answer += answers[i].value+",";
						}
					}
					answer = answer.substring(0, answer.length-1);
				} else if(answers.length == 1){
					answer = answers[0].value;
				}
				if(answer != ""){
					var activityId = $("#actyId").val();
					var questionId = $("#quesId").val();
					var question = $("#quesQues").val();
					var questionOrder = $("#quesNum").val();
					addCok(activityId,questionId,question,questionOrder,answer);
				}
				return false;
			} else{
				alert("未知错误！");
				return false;
			}
		}
		
		function subQues(){
			if(isLogin()){
				thisQuesAns();
				$("#quesShow1").hide();
				$("#quesShow2").show();
			} else{
				toLogin();
			}
		}
		
		function lastQues(){
			var quesNum = $("#quesNum").val();
			if(quesNum == 1){
				return false;
			}
			quesId = $("#quesDiv_"+(quesNum-1)).val();
			getQues(quesId);
		}
		
		function nextQues(){
			var quesNum = $("#quesNum").val();
			if(isLogin()){
				thisQuesAns();
				if(quesNum == $("#quesTotal").val()){
					$("#quesShow1").hide();
					$("#quesShow2").show();
					return false;
				}
			} else {
				if(quesNum == $("#quesTotal").val()){
					toLogin();
					return false;
				}
			}
			quesId = $("#quesDiv_"+(parseInt(quesNum)+1)).val();
			getQues(quesId);
		}
		
		//登录跳转
		function toLogin(){
			if(confirm("您需要登录才能提交,登录后会自动保存您的结果.是否登录?")){
				$('#signframe').show();
				$('#sf-sign').show();
				$('#sf-regist').hide();
				$('#signframe').addClass("signframesp");
				$('#userName').focus();
			}
		}
		
		function thisQuesAns(){
			 $("#quesAnswer").ajaxSubmit(function(date,res,me){
                 if(date.suc){
                 }
             });
		}
		
		function getQues(quesId){
			$.post("/activityFore/getQuestionOption.html", {
				"questionId" : quesId
			}, function(data) {
				if (data.suc) {
					if(data.activityQuestion != null){
						var ques = data.activityQuestion;
						$("#quesId").attr("value",ques.id);
						$("#quesNum").attr("value",ques.num);
						$("#quesQues").attr("value",ques.question);
						$("#quesName")[0].innerHTML = "Q"+ques.num+":"+ques.question;
						$("#quesOpt").html("");
						if(ques.type == "0"){
							if(ques.activityOptionList != null){
								var opt = ques.activityOptionList;
								for(var i=0;opt.length>i;i++){
									var span1 = $('<span class="apop-0"></span>');
									var input1 = $('<input type="radio" class="apop-0r" />');
									input1.attr("name","answer");
									input1.attr("value",opt[i].name);
									if(ques.answer != null){
										if(ques.answer == opt[i].name)
											input1.attr("checked",true);
									}
									span1.append(input1);
									var span2 = $('<span>'+opt[i].name+'</span>');
									span1.append(span2)
									$("#quesOpt").append(span1);
								}
							}
						} else if(ques.type == "1"){
							var span1 = $('<span class="apop-1">分数:</span>');
							var input1 = $('<input type="text" />');
							input1.attr("name","answer")
							if(ques.answer != null){
								input1.attr("value",ques.answer);
							}
							$("#quesOpt").append(span1);
							$("#quesOpt").append(input1);
						} else if(ques.type == "2"){
							var span1 = $('<span  class="apop-1">答案:</span>');
							var input1 = $('<input type="text" />');
							input1.attr("name","answer")
							if(ques.answer != null){
								input1.attr("value",ques.answer);
							}
							$("#quesOpt").append(span1);
							$("#quesOpt").append(input1);
						} else if(ques.type == "3"){
							if(ques.activityOptionList != null){
								var opt = ques.activityOptionList;
								for(var i=0;opt.length>i;i++){
									var span1 = $('<span class="apop-0"></span>');
									var input1 = $('<input type="radio" class="apop-0r" />');
									input1.attr("name","answer");
									input1.attr("value",opt[i].name);
									if(ques.answer != null){
										if(ques.answer == opt[i].name)
											input1.attr("checked",true);
									}
									span1.append(input1);
									var span2 = $('<span>'+opt[i].name+'</span>');
									span1.append(span2)
									$("#quesOpt").append(span1);
								}
							}
						} else if(ques.type == "4"){
							if(ques.activityOptionList != null){
								var opt = ques.activityOptionList;
								for(var i=0;opt.length>i;i++){
									var span1 = $('<span class="apop-0"></span>');
									var input1 = $('<input type="checkbox" class="apop-1r" />');
									input1.attr("name","answer");
									input1.attr("value",opt[i].name);
									if(ques.answer != null){
										var array = ques.answer.split(",");
										for(var j=0;array.length>j;j++){
											if(array[j] == opt[i].name){
												input1.attr("checked",true);
											}
										}
									}
									span1.append(input1);
									var span2 = $('<span>'+opt[i].name+'</span>');
									span1.append(span2)
									$("#quesOpt").append(span1);
								}
							}
						}
						
						if(ques.num == 1){
							$("#lastbut").attr("class","apopbtnone lbtn");
						} else{
							$("#lastbut").attr("class","apopbtnone lbtn btnon");
						} 
						if($("#quesTotal").val() == ques.num){
							$("#nextbut").attr("class","apopbtnone rbtn");
						} else{
							$("#nextbut").attr("class","apopbtnone rbtn btnon");
						}
					}
				}
			}, "json");
		}
		
		function hideQues(){
			$("#quesDiv").hide();
		}
		
	</script>
</html>
